<template>
    <div class="login-bg">
        <div class="login-card">
            <div class="login-title">找回密码</div>
            <div class="login-subtitle">请输入您的用户名，系统将发送重置信息</div>
            <el-form :model="form" :rules="rules" ref="forgotForm" label-width="0">
                <el-form-item prop="username">
                    <el-input v-model="form.username" placeholder="请输入用户名" clearable />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" style="width: 100%; font-size: 18px;" @click="onReset">重置密码</el-button>
                </el-form-item>
            </el-form>
            <div class="login-bottom">
                <span>想起密码了？</span>
                <a class="login-link" @click.prevent="goToLogin" href="/login">立即登录</a>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

const router = useRouter()
const form = ref({ username: '' })
const rules = {
    username: [{ required: true, message: '请输入用户名', trigger: 'blur' }]
}
const forgotForm = ref(null)

function onReset() {
    forgotForm.value.validate(valid => {
        if (valid) {
            ElMessage.success('重置密码邮件已发送（模拟）')
            router.push('/login')
        }
    })
}
function goToLogin() {
    router.push('/login')
}
</script>

<style scoped>
.login-bg {
    min-height: 100vh;
    background: linear-gradient(135deg, #a3b8fd 0%, #d6e0ff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-card {
    width: 400px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 8px 32px 0 rgba(31, 56, 108, 0.12);
    padding: 40px 36px 24px 36px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.login-title {
    text-align: center;
    font-size: 32px;
    font-weight: bold;
    color: #222;
    margin-bottom: 8px;
    letter-spacing: 2px;
}

.login-subtitle {
    text-align: center;
    color: #888;
    font-size: 15px;
    margin-bottom: 28px;
}

.login-link {
    color: #409EFF;
    float: right;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    margin-left: 8px;
}

.login-link:hover {
    text-decoration: underline;
}

.login-bottom {
    text-align: center;
    margin-top: 10px;
    color: #888;
    font-size: 14px;
}
</style>